@page "/lengthvalidator"
@using Radzen
@using System.Text.Json
@using System.Text.Json.Serialization

<RadzenExample Name="LengthValidator" Documentation="false">
<div class="row">
    <div class="col-xl-6">
        <div class="row">
            <div class="col">
                <RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
                    <RadzenFieldset Text="Personal information">
                        <div class="row" style="margin-bottom: 48px">
                            <div class="col-md-4 align-right">
                                <RadzenLabel Text="First Name" />
                                <small style="display: block">(3-10 characters)</small>
                            </div>
                            <div class="col">
                                <RadzenTextBox style="display: block" Name="FirstName" @bind-Value=@model.FirstName />
                                <RadzenLengthValidator Component="FirstName" Min="3" Text="First name should be at least 3 characters" Popup=@popup Style="position: absolute" />
                                <RadzenLengthValidator Component="FirstName"  Max="10" Text="First name should be at most 10 characters" Popup=@popup Style="position: absolute" />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom: 48px">
                            <div class="col-md-4">
                                <RadzenLabel Text="Last Name" />
                                <small style="display: block">(3-10 characters)</small>
                            </div>
                            <div class="col">
                                <RadzenTextBox style="display: block" Name="LastName" @bind-Value=@model.LastName />
                                <RadzenLengthValidator Component="LastName" Min="3" Text="Last name should be at least 3 characters" Popup=@popup Style="position: absolute" />
                                <RadzenLengthValidator Component="LastName"  Max="10" Text="Last name should be at most 10 characters" Popup=@popup Style="position: absolute" />
                            </div>
                        </div>
                        <RadzenButton ButtonType="ButtonType.Submit" Text="Submit"></RadzenButton>
                    </RadzenFieldset>
                </RadzenTemplateForm>
            </div>
            <div class="col">
                <label>
                    Display validators as popup
                    <RadzenCheckBox @bind-Value=@popup></RadzenCheckBox>
                </label>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    class Model
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

    bool popup;

    Model model = new Model();
    EventConsole console;

    void OnSubmit(Model model)
    {
        console.Log($"Submit: {JsonSerializer.Serialize(model, new JsonSerializerOptions() {  WriteIndented = true })}");
    }

    void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
    {
        console.Log($"InvalidSubmit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() {  WriteIndented = true })}");
    }
}